* {
  margin: 0;
  padding: 0;
}

/* 整体盒子样式 */
.container {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url(../assets/layout/container_bg.png);
  background-size: 100% 100%;
}

/* 标题部分 上部分 */
.container .header {
  height: 200px;
  background: url(../assets/layout/header.png);
  background-size: 100% 200px;
}
/* 标题 */
.header .header_title {
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 26px;
}

/* 图表盒子(公共盒子样式) */
.chart_box {
  height: 28vh;
  background: url(../assets/layout/chart_box_bg.png);
  background-size: 100% 100%;
  margin: 0 .5em .5em .5em;
  padding: 0.5em;
}
.cb_title {
  display: flex;
}
.cb_title .icon{
  width: 24px;
  height: 30px;
  background: url(../assets/icons/box_title_icon.png);
  background-size: 100% 100%;
  margin-left: 10px;
}
.cb_title .text {
  color: #fff;
  font-size: 24px;
  margin-left: 10px;
}
.plot_box{
  width: 100%;
  height: 24vh;
}

/* 地图样式 */
.charts_map{
  background: url(../assets/layout/chart_center_box_bg.png);
  background-size: 100% 100%;
  margin-bottom: 0.5em;
  padding:1em 0.5em ;
}

#map{
  height: 57vh;
  border-radius: 5px;
  overflow: hidden;
}



/* 图表上部分 */
.charts {
  position: absolute;
  width: 100%;
  top: 60px;
}

.charts .charts_top {
  display: flex;
}

.charts_left {
  flex: 2;
}

.charts_map {
  flex: 4;
}

.charts_right {
  flex: 2;
}

/* left1图表 */
.left1_content {
  /* width: 100%; */
  height: 22vh;
}

/* 图表下部分 */
.charts_bottom {
  display: flex;
}

.bottom1,
.bottom2,
.bottom3,
.bottom4 {
  flex: 2;
}